.message-page {
    .nav-content {
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        background: #fff;

        .left {
            height: 100%;
            display: flex;
            align-items: center;

            .title {
                font-weight: 500;
                font-size: 19px;
                color: $xboot-text-color;
            }
        }

        .right {
            height: 100%;
            display: flex;
            align-items: center;

            .icon {
                width: 25px;
                height: 25px;
            }

            .r {
                margin-right: 20px !important;
            }

            .r2 {
                margin-right: 3px !important;
            }

            .top {
                margin-top: 2px !important;
            }
        }
    }

    .menu-item {
        padding: 13px 16px;
        display: flex;
        align-items: center;
        position: relative;
        background: #fff;

        .iconfont {
            font-size: 21px;
            color: $xboot-icon-color;
            margin-right: 10px;
        }
        
        .txt {
            font-size: 16px;
            color: $xboot-text-color;
        }

        &:hover {
            background: $xboot-bg-color-hover;
        }

        &::after {
            content: '';
            position: absolute;
            border-bottom: 1px solid #eaeef1;
            -webkit-transform: scaleY(0.5);
            transform: sc8aleY(0.5);
            bottom: 0;
            right: 16px;
            left: 16px;
        }
    }

	.border-top {
        border-radius: 4px 4px 0 0;
    }

    .border-bottom {
        border-radius: 0 0 4px 4px;
    }

    .tabs {}

    .content {
        padding: 0 0 25px 0;
        padding-top: var(--status-bar-height);
        margin-top: 84px;
        display: flex;
        box-sizing: border-box;
        flex-direction: column;

        .chat-list-item {
            padding: 8px 15px;
            height: 55px;
            display: flex;
            align-items: center;
            justify-content: flex-start;

            &:after {
                content: '';
                position: absolute;
                border-bottom: 1px solid $xboot-border-color;
                -webkit-transform: scaleY(0.5) translateZ(0);
                transform: scaleY(0.5) translateZ(0);
                -webkit-transform-origin: 0 100%;
                transform-origin: 0 100%;
                bottom: 0;
                right: 0;
                left: 75px;
                pointer-events: none;
            }

            .icon {
                width: 40px;
                height: 40px;
                margin-right: 13px;

                .img {
                    width: 40px;
                    height: 40px;
                    border-radius: 8px;
                }
            }


            .detail {
                display: flex;
                flex-direction: column;
                width: 100%;

				.top {
					display: flex;
					justify-content: space-between;
                	width: 100%;
					margin-bottom: 2px;
					.title {
						font-size: 16px;
						color: $xboot-text-color;
						width: 100%;
					}
					.time {
						display: flex;
						justify-content: flex-end;
						align-items: center;
						width: 50px;
						font-size: 13px;
						color: $xboot-text-color-grey;
					}
				}
                .bottom {
					display: flex;
					justify-content: space-between;
                	width: 100%;
					.desc {
						font-size: 13px;
						color: $xboot-text-color-grey;
						width: 100%;
					}
					.badge {
						display: flex;
						justify-content: flex-end;
						align-items: center;
						width: 50px;
					}
				}
                
            }

            &:active {
                background: $xboot-bg-color-hover;
            }
        }

        height: 800px;
    }
}